$(function () {
    $('.first>li').hover((event) => {
        // console.log(event)
        console.log(event.target.dataset.id);
        $('.' + event.target.dataset.id).css('display', 'block');
        $('.header-bottom-left').css('display', 'none');
    }, (event) => {
        $('.' + event.target.dataset.id).css('display', 'none');

    })
    $('header').mouseleave(() => {
        $('.header-bottom-left').css('display', 'block');
        console.log('-------')

    })

    // 鼠标的hover事件  跟着鼠标移入移出
    $('#box ul li').hover(function (ev) {
        move.call(this, ev, true)
    }, function (ev) {
        move.call(this, ev, false)
    });

    function move(ev, bool) { //自定义函数
        var top = $(this).offset().top, //获取li上边距离浏览器的距离
            bottom = top + $(this).height(), //获取li下边距离浏览器的距离
            left = $(this).offset().left, //获取li左边距离浏览器的距离
            right = left + $(this).width(); //获取li右边距离浏览器的距离

        var x = ev.pageX, //鼠标的x坐标
            y = ev.pageY; //鼠标的y坐标

        var sT = Math.abs(y - top), //把y-top去绝对值
            sB = Math.abs(y - bottom),
            sL = Math.abs(x - left),
            sR = Math.abs(x - right);
        //找到上面四个值中最小得值
        var min = Math.min(sT, sB, sL, sR);

        console.log(min);
        switch (min) {
            case sT: //从上面出来
                if (bool) { //如果bool为true ,就是鼠标移进来
                    $(this).find('.text').css({
                        left: 0,
                        top: '-210px',
                        display: 'block',
                    }).stop().animate({
                        top: 0
                    }, 300)
                } else { //鼠标移除
                    $(this).find('.text').stop().animate({
                        top: '-210px',
                        display: 'none',
                    }, 300)
                }
                break;
            case sB: //从下面出来
                if (bool) { //如果bool为true ,就是鼠标移进来
                    $(this).find('.text').css({
                        left: 0,
                        top: '210px',
                        display: 'block'
                    }).stop().animate({
                        top: 0
                    }, 300)
                } else { //鼠标移除
                    $(this).find('.text').stop().animate({
                        top: "210px",
                        display: 'none'
                    }, 300)
                }
                break;
            case sL: //从左面出来
                if (bool) { //如果bool为true ,就是鼠标移进来
                    $(this).find('.text').css({
                        left: '-480px',
                        top: 0,
                        display: 'block'
                    }).stop().animate({
                        left: 0
                    }, 300)
                } else { //鼠标移除
                    $(this).find('.text').stop().animate({
                        left: '-480px',
                        display: 'none'
                    }, 300)
                }
                break;
            case sR: //从右面出来
                if (bool) { //如果bool为true ,就是鼠标移进来
                    $(this).find('.text').css({
                        left: '480px',
                        top: 0,
                        display: 'block'
                    }).stop().animate({
                        left: 0
                    }, 300)
                } else { //鼠标移除
                    $(this).find('.text').stop().animate({
                        left: "480px",
                        display: 'none'
                    }, 300)
                }
                break;
        }
    }

    // main中男士女士图片的那个
    $('.main-left-top img').hover(function (){
        $(this).css('opacity','0.8')
    },function (){
      $(this).css('opacity','1')
    })

    // main 中两个图片下面的字
  $('.main-left-top li a , .main-left-bottom li a').hover(function (){
        $(this).css('color','#aaa')
    
  },function (){
        $(this).css('color','#222')
  
  })






})